<template>
  <div>
    <!-- horizontal  -->
    <a-list
      size="small"
      item-layout="horizontal"
      :data-source="data"
      pagination
      :grid="{ gutter: 16, column: 4 }"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">
            <template #title>
              <a href="https://www.antdv.com/">{{ item.title }}</a>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" />
            </template>

          </a-list-item-meta>

        </a-list-item>
      </template>
      <template #header>
        <div>Header</div>
      </template>
      <template #footer>
        <div>Footer</div>
      </template>
    </a-list>
    <a-list
      :data-source="data1"
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :title="item.title">Card content</a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      data: [
        {
          title: 'Ant Design Title 1',
        }, {
          title: 'Ant Design Title 2',
        }, {
          title: 'Ant Design Title 3',
        }, {
          title: 'Ant Design Title 4',
        }
      ],
      data1: [
        {
          title: 'Title 1',
        }, {
          title: 'Title 2',
        }, {
          title: 'Title 3',
        }, {
          title: 'Title 4',
        }, {
          title: 'Title 5',
        }, {
          title: 'Title 6',
        }
      ]
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
